import React, { Component } from 'react';
import { connect } from 'react-redux';
import { actionCreators } from './store';
import { actionCreators as loginActionCreators } from '../../pages/login/store';
import { CSSTransition } from 'react-transition-group';
import {
	HeaderWrapper,
	Logo,
	Nav,
	NavItem,
	SearchWrapper,
	NavSearch,
	SearchInfo,
	SearchInfoTitle,
	SearchInfoSwitch,
	SearchInfoList,
	SearchInfoItem,
	Addition,
	Button
} from './style';
import { Link } from 'react-router-dom';

class Header extends Component {
	constructor(props) {
		super(props);
	}
	
	getListArea = () => {
		const { focused, mouseIn, list, page, totalPage, handleMouseEnter, handleMouseLeave, handleChangePage } = this.props;
		const jsList = list.toJS();
		const pageList = [];
		
		if (jsList.length) {
			for (let i = (page - 1) * 5; i < page * 5; i++) {
				if (jsList[i]) {
					pageList.push(
						<SearchInfoItem key={jsList[i]}>{jsList[i]}</SearchInfoItem>
					)
				}
			}
		}
		
		if (focused || mouseIn) {
			return (
				<SearchInfo
					onMouseEnter={ handleMouseEnter }
					onMouseLeave={ handleMouseLeave }
				>
					<SearchInfoTitle>
						热门搜索
						<SearchInfoSwitch
							onClick={ () => handleChangePage(page, totalPage, this.spinIcon) }
						>
							<i ref={(icon) => {this.spinIcon = icon}} className="iconfont spin">&#xe851;</i>
							换一批
						</SearchInfoSwitch>
					</SearchInfoTitle>
					<SearchInfoList>
						{ pageList }
					</SearchInfoList>
				</SearchInfo>
			)
		} else {
			return null;
		}
	}
	
	render() {
		const { focused, list, handleInputFocus, handleInputBlur, login, logout } = this.props;
		return (
			<HeaderWrapper>
				<Link to="/">
					<Logo />
				</Link>
				<Nav>
					<NavItem className="left active">首页</NavItem>
					<NavItem className="left">下载App</NavItem>
					{  
						login ?
							<NavItem onClick={logout} className="right">退出</NavItem>
							:
							<Link to='/login'>
								<NavItem className="right">登陆</NavItem>
							</Link>
					}
					<NavItem className="right">
						<i className="iconfont">&#xe636;</i>
					</NavItem>
					<SearchWrapper>
						<CSSTransition
							in={focused}
							timeout={200}
							classNames="slide"
						>
							<NavSearch
								className={focused ? "focused" : ""}
								onFocus={() => handleInputFocus(list)}
								onBlur={handleInputBlur}
							>
							</NavSearch>
						</CSSTransition>
						<i
							className={focused ? "focused iconfont zoom" : "iconfont zoom"}
						>
							&#xe623;
						</i>
						{ this.getListArea() }
					</SearchWrapper>
				</Nav>
				<Addition>
					<Link to='/write'>
						<Button className="writting">
							<i className="iconfont">&#xe6e5;</i>
							写文章
						</Button>
					</Link>
					<Button className="reg">注册</Button>
				</Addition>
			</HeaderWrapper>
		)
	}
}

const mapStateToProps = (state) => {
	return {
		// 原始
		// focused: state.header.focused
		// 使用了immutable
		// focused: state.header.get('focused')
		// 最外面还使用了redux-immutable
		// focused: state.get('header').get('focused')
		// 上一行的优雅写法如下
		focused: state.getIn(['header', 'focused']),
		mouseIn: state.getIn(['header', 'mouseIn']),
		list: state.getIn(['header', 'list']),
		page: state.getIn(['header', 'page']),
		totalPage: state.getIn(['header', 'totalPage']),
		login: state.getIn(['login', 'login'])
	}
}

// store.dispatch方法挂载到props上，可以改变store里面的数据
const mapDispatchToProps = (dispatch) => {
	return {
		handleInputFocus(list) {
			(list.size === 0) && dispatch(actionCreators.getList());
			dispatch(actionCreators.searchFocus());
		},
		handleInputBlur() {
			dispatch(actionCreators.searchBlur());
		},
		handleMouseEnter() {
			dispatch(actionCreators.mouseEnter());
		},
		handleMouseLeave() {
			dispatch(actionCreators.mouseLeave());
		},
		handleChangePage(page, totalPage, spin) {
			let originAngle = spin.style.transform.replace(/[^0-9]/ig, '');
			if (originAngle) {
				originAngle = parseInt(originAngle, 10);
			} else {
				originAngle = 0;
			}
			spin.style.transform = 'rotate(' + (originAngle + 360) + 'deg)';
			if ( page < totalPage) {
				dispatch(actionCreators.changePageList(page + 1));
			} else {
				dispatch(actionCreators.changePageList(1));
			}
		},
		logout() {
			dispatch(loginActionCreators.logout());
		}
	}
}

export default connect(mapStateToProps, mapDispatchToProps)(Header);